<script setup lang="ts">
import { useChannelStore } from '@/stores/channel';
import type { AxiosResData, ChannelResData } from '@/type';
import axios from 'axios'
import { onMounted, ref } from 'vue';
// 定义接口类型
interface ChannelItem  {
  id: number;
  name: string;
};

// defineProps<{
//   channelId:number
// }>()

const store = useChannelStore()

// defineEmits<{
//   'update:channelId': [channelId: number]
// }>()



// 定义数据
const list = ref<ChannelItem[]>([])

const getList = async()=>{
  const res = await axios.get<AxiosResData<ChannelResData>>('http://geek.itheima.net/v1_0/channels');
  console.log(res)// 调试工具，查看数据，再鼠标右键，复制属性路径 data.data.channels
  // 保存频道数据
  list.value = res.data.data.channels
}
// 组件挂载完成
onMounted(()=>{
   // 获取频道数据
    getList()
  })

</script>
 
<template>
  <div class="channel-nav">
    <nav class="list">
      <a class="item" :class="{ active: store.channelId === item.id }"href="javascript:;"v-for="(item, i) in list":key="item.id" @click="store.updateChannelId(item.id)">
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>